<template>
  <div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      class="w-full dialog-form"
      label-width="auto"
      size="small"
      :disabled="dialogType === 'view'"
    >
      <el-collapse v-model="activeList">
        <el-collapse-item name="1">
          <template #title>
           <el-icon><List /></el-icon>  详细信息
          </template>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属部门" prop="parentId">
                <el-tree-select
                  clearable
                  v-model="ruleForm.parentId"
                  placeholder="请选择 所属部门"
                  lazy
                  node-key="id"
                  :filter-node-method="filterNodeMethod"
                  filterable
                  :load="load"
                  check-strictly
                  :props="{
            label: 'deptName',
            children: 'children',
            isLeaf: 'isLeaf',
          }"
                >
                </el-tree-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="姓名" prop="realName">
                <el-input v-model="ruleForm.realName" placeholder="请输入 姓名"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="手机号码" >
                <el-input v-model="ruleForm.phone" placeholder="请输入 手机号码"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电子邮箱">
                <el-input v-model="ruleForm.email" placeholder="请输入 电子邮箱"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户性别" >
                <el-select v-model="ruleForm.sex" placeholder="请选择 用户性别">
                  <el-option label="男" value="男"/>
                  <el-option label="女" value="女"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item name="2">
          <template #title>
           <el-icon><UserFilled /></el-icon>  基础信息
          </template>
          <el-row>
            <el-col :span="12">
              <el-form-item label="登录账号" prop="account">
                <el-input v-model="ruleForm.account" placeholder="请输入 登录账号"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="密码">
                <el-input v-model="ruleForm.password" placeholder="请输入 密码"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="确认密码">
                <el-input v-model="ruleForm.password1" placeholder="请输入 确认密码"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item name="3">
          <template #title>
           <el-icon><UserFilled /></el-icon>  职责信息
          </template>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属角色">
                <el-select v-model="ruleForm.roleId" placeholder="请选择 所属角色">
                  <el-option label="Zone one" value="shanghai"/>
                  <el-option label="Zone two" value="beijing"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </div>
</template>
<script lang="ts">
  import {defineComponent, getCurrentInstance, reactive, ref, toRaw} from "vue";
  import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
  import {getDictDetail} from "@/api/utils";
  import {getOrgList} from "@/api/ERP_sales";

  export default defineComponent({
    name: 'EditForm',
    expose: ['init', 'submitForm',],
    emits: ['init', 'submitForm','register'],
    setup(props, { emit }) {
      const ruleFormRef = ref<FormInstance>()
      const ruleForm = reactive<any>({
        parentId: '',
        realName: '',
        phone: '',
        email: '',
        sex: '',
        account: '',
        password: '',
        password1: '',
        roleId: '',
      })
      const rules = reactive<any>({
        parentId:[
          {
            required: true,
            message: '请选择 所属部门',
            trigger: 'change',
          },
        ],
        realName: [
          { required: true, message: '请输入 姓名', trigger: 'blur' },
        ],
        account: [
          { required: true, message: '请输入 部门名称', trigger: 'blur' },
        ],
      })

      const originRow = ref({})
      const submitForm = async () => {
        if (!ruleFormRef.value) return

        const valid = await ruleFormRef.value.validate()
        const parentId = Number.isNaN(+ruleForm.parentId) ? originTreeRow.value.id : ruleForm.parentId
        if (valid) {
          return Promise.resolve({
            form: {
              ...toRaw(ruleForm),
              parentId,
            },
            row: {
              ...toRaw(originRow.value),
            },
            type: dialogType.value
          })
        } else {
          return Promise.reject()
        }
      }


      const resetFields = () => {
        ruleFormRef.value.resetFields()
      }

      const dialogType = ref('')
      const originTreeRow  = ref({})
      const  init = async (type, row, treeRow) => {
        dialogType.value= type
        originRow.value = row
        originTreeRow.value = treeRow
        if(type === 'add' ) {
          const newFormData = {
            parentId: '',
          }
          if(treeRow.id) {
            newFormData.parentId = treeRow.deptName
          }

          Object.assign(ruleForm, newFormData);
          return
        }
        console.log(row)
        if(row.id) {
          const newFormData = {
            parentId: row.parentName,
            realName: row.realName,
            phone: row.phone,
            email: row.email,
            sex: row.sex,
            account: row.account,
            password: '',
            password1: '',
            roleId: row.roleId,
          };
          Object.assign(ruleForm, newFormData);
        }

      }

      const instance = getCurrentInstance()
      emit('register', instance)

      const activeList = ref(['1', '2', '3'])

      const filterNodeMethod = (value, data) => {
        return data.deptName.includes(value)
      }
      const load = async (node, resolve) => {
        if (node.isLeaf) return resolve([])
        const { data } = await getOrgList({
          parentId: node.data.id,
        })
        const data1 = data.map(v => {
          return {
            ...v,
            value: v.id,
            isLeaf: !v.hasChildren,
          }
        })
        resolve(data1)
      }
      return {
        init,
        submitForm,
        resetFields,
        rules,
        ruleForm,
        ruleFormRef,
        dialogType,
        originRow,
        filterNodeMethod,
        load,
        activeList,
      }
    }
  })
</script>
<style lang="scss">
  .dialog-form {
    .el-input-number {
      width: 100%!important;
      input {
        text-align: left;
      }
    }
  }
</style>
